<template>
	<view>
		<custom-header title="鲜花视频" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 215rpx - '+statusBarHeight+'px)'}" 
			class="scroll_content_wrap">
				<view class="_wrap">
					<view class="upload_wrap">
						<view 
							class="upload_btn" 
							hover-class="custom_hover" 
							:hover-start-time="0" 
							:hover-stay-time="200"
							@click="handleUpload">
							<view class="up_wrap">
								<view class="icon">
									<image src="/static/common/upload.png" mode=""></image>
								</view>
								<view class="text">上传视频</view>
							</view>
						</view>
						<view class="hint_wrap">
							<view class="list">建议使用竖屏拍摄</view>
							<view class="list">视频呈现清晰、真实、有效</view>
							<view class="list">不得含有违法违规内容</view>
							<view class="list">拍摄内容与所售商品相匹配</view>
						</view>
					</view>
					<view class="good_info" @click="handleShowSelect">
						<view class="title">
							关联商品 <text>*</text>
						</view>
						<view class="name_icon" hover-class="custom_hover" :hover-start-time="0" :hover-stay-time="200">
							<view class="name">
								<text class="have" v-if="goodName">{{ goodName }}</text>
								<text class="no_have" v-else>选择商品</text>
							</view>
							<view class="icon">
								<image src="/static/common/right.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>
		<view class="footer_btn_wrap">
			<view class="read"  @click="checked = !checked">
				<view class="icon">
					<image src="/static/common/check.png" mode="" v-if="checked"></image>
					<image src="/static/common/no_check.png" mode="" v-else></image>
				</view>
				<view class="text">
					请阅读<text @click.stop="handleShowNotice">《视频须知》</text>（重要）
				</view>
			</view>
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn confirm" 
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleSubmit"
					:disabled="btnLoading"
					:loading="btnLoading">提交视频</button>
			</view>
		</view>
		<!--  选择商品  -->
		<up-popup 
			:show="isShowSelectGood" 
			mode="bottom" 
			:round="20" 
			bgColor="#F5F5F5"
			@close="isShowSelectGood = false">
			<view class="select_good_wrap">
				<view class="close">
					<image src="/static/common/close.png" mode=""></image>
				</view>
				<view class="sgw_header">
					<view class="title">选择鲜花</view>
					<view class="number">共{{ goodList.length }}个在售商品</view>
				</view>
				<view class="sgw_search">
					<view class="input_wrap">
						<view class="icon">
							<image src="/static/common/search.png" mode="widthFix"></image>
						</view>
						<view class="input">
							<input placeholder="请输入" :value="modelValue" @input="onInput" type="text" />
						</view>
					</view>
					<view 
						class="btn" 
						hover-class="custom_hover" 
						:hover-start-time="0" 
						:hover-stay-time="200"
						@click="modelValue = ''">取消</view>
				</view>
				<scroll-view :scroll-y="true" class="list_wrap" scroll-with-animation>
					<view 
						class="list" 
						v-for="(item,index) in goodList" 
						:key="index"
						hover-class="custom_hover" 
						:hover-start-time="0" 
						:hover-stay-time="200"
						@click="handleSelectGood(item)">
						<view class="img">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg" mode=""></image>
						</view>
						<view class="info">
							<view class="name_grade">
								<view class="name">{{ item.name }}</view>
								<view class="grade">{{ item.grade }}</view>
							</view>
							<view class="za">{{ item.za }}支/扎</view>
						</view>
						<view class="status" v-if="item.status == 1">
							<view class="icon">
								<image src="/static/common/update_icon.png" mode=""></image>
							</view>
							<view class="text">视频需更新</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false">
		</custom-popup>
	</view>
</template>

<script setup>
	import { ref,computed } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from 'vuex'
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	}) 
	
	// 弹窗提示
	const isShowToast = ref(false)
	const popupConfig  = ref({})
	
	const goodName = ref('')
	
	
	// 同意阅读
	const checked = ref(false)
	const handleShowNotice = ()=>{
		uni.navigateTo({
			url:'/pages/videoNotice/videoNotice'
		})
	}
	
	// 提交
	const btnLoading = ref(false)
	const handleSubmit = ()=>{
		if(!goodName.value){
			popupConfig.value.message = '请选择鲜花'
			isShowToast.value = true
			return
		}
		if(!checked.value){
			popupConfig.value.message = '请勾选视频须知'
			isShowToast.value = true
			return
		}
		btnLoading.value = true
		setTimeout(()=>{
			btnLoading.value = false
			uni.redirectTo({
				url:'/pages/uploadVideoSuccess/uploadVideoSuccess'
			})
		},1000)
		
	}
	
	
	// 选择商品
	const goodList = ref([
		{ id:1,name:'奶油向日葵',grade:'A级',za:'10',status:1 },
		{ id:2,name:'黑心向日葵',grade:'B级',za:'5',status:0 },
		{ id:3,name:'奶油向日葵',grade:'C级',za:'2',status:1 },
		{ id:4,name:'重瓣向日葵3支',grade:'D级',za:'3',status:0 },
		{ id:5,name:'奶油向日葵',grade:'D级',za:'3',status:0 },
		{ id:6,name:'迷你奶油向日葵',grade:'D级',za:'3',status:0 },
		{ id:7,name:'奶油向日葵',grade:'D级',za:'3',status:0 },
		{ id:8,name:'奶油向日葵',grade:'D级',za:'3',status:0 },
		{ id:8,name:'奶油向日葵',grade:'D级',za:'3',status:0 },
		{ id:10,name:'奶油向日葵',grade:'D级',za:'3',status:0 },
	])
	const isShowSelectGood = ref(false)
	const modelValue = ref('')
	const onInput = (e)=>{
		console.log(e)
		modelValue.value = e.detail.value
	}
	const handleShowSelect = ()=>{
		isShowSelectGood.value = true
	}	
	const handleSelectGood = (item)=>{
		goodName.value = item.name
		isShowSelectGood.value = false
	}
	
	onLoad(( option )=>{
		console.log(option)
	})
</script>

<style lang="scss">
	._wrap{
		padding: 20rpx;
	}
	.upload_wrap{
		padding: 30rpx;
		height: 466rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		.upload_btn{
			width: 320rpx;
			height: 320rpx;
			border-radius: 20rpx;
			border: 2rpx dashed #CCCCCC;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				width: 88rpx;
				height: 88rpx;
				margin: 0 auto;
			}
			.text{
				font-size: 28rpx;
				color: #666666;
				text-align: center;
				padding-top: 20rpx;
			}
		}
		.hint_wrap{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 20rpx;
			.list{
				font-size: 24rpx;
				color: #666;
				display: flex;
				align-items: center;
				padding-top: 20rpx;
				&::before{
					content: '';
					display: block;
					width: 12rpx;
					height: 12rpx;
					background: #00BAAD;
					border-radius: 100%;
					margin-right: 10rpx;
				}
			}
		}
	}
	.good_info{
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		margin-top: 20rpx;
		.title{
			text{
				color: #C60C0C;
			}
		}
		.name_icon{
			display: flex;
			align-items: center;
			.no_have{
				color: #BBBBBB;
			}
			.icon{
				display: flex;
				width: 10rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}
	}
	.footer_btn_wrap{
		height: 210rpx;
		.read{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0 30rpx;
			.icon{
				width: 24rpx;
				height: 24rpx;
				display: flex;
			}
			.text{
				font-size: 24rpx;
				color: #bbb;
				padding-left: 10rpx;
				text{
					color: #F5564D;
				}
			}
		}
		.btn_wrap{
			height: 128rpx;
		}
	}
	.select_good_wrap{
		min-height: 100px;
		padding: 20rpx;
		position: relative;
		.close{
			width: 41rpx;
			height: 41rpx;
			position: absolute;
			top: 20rpx;
			right: 30rpx;
		}
		.sgw_header{
			display: flex;
			padding: 0 10rpx;
			align-items: center;
			.title{
				font-size: 32rpx;
				color: #666666;
			}
			.number{
				color: #AAAAAA;
				font-size: 24rpx;
				padding-left: 10rpx;
			}
		}
		.sgw_search{
			display: flex;
			align-items: center;
			padding: 40rpx 0 20rpx;
			.input_wrap{
				flex: 1;
				height: 68rpx;
				border-radius: 62rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				padding:0 20rpx;
				.icon{
					width: 28rpx;
					height: 28rpx;
					display: flex;
				}
				.input{
					padding-left: 15rpx;
					flex: 1;
					input{
						width: 100%;
						font-size: 28rpx;
						color: #666;
					}
				}
			}
			.btn{
				width: 80rpx;
				height: 68rpx;
				line-height: 68rpx;
				font-size: 28rpx;
				color: #AAAAAA;
				text-align: right;
			}
		}
		.list_wrap{
			padding: 15rpx;
			border-radius: 10rpx;
			background: #fff;
			height: 500rpx;
			.list{
				display: flex;
				padding: 15rpx 0;
				border-top: 1px solid #F2F2F2;
				position: relative;
				&:first-child{
					border-top:0;
				}
				.status{
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					display: flex;
					align-items: center;
					.icon{
						width: 20rpx;
						height: 20rpx;
						display: flex;
					}
					.text{
						font-size: 24rpx;
						color: #00BAAD;
						padding-left: 10rpx;
					}
				}
				.img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 4rpx;
				}
				.info{
					padding-left: 10rpx;
					.name_grade{
						display: flex;
						font-size: 28rpx;
						.name{
							color: #666;
						}
						.grade{
							color: #F5564D;
							font-weight: bold;
							padding-left: 20rpx;
						}
					}
					.za{
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
